<template>
<div class="content-container" direction="vertical">
    <el-container class="content-row">
        <div>
            <h2 style="margin-top:10px;text-align:center;">订单详情</h2>
            <h2 style="text-align:center;">订单ID: {{ oid }}&nbsp;&nbsp;&nbsp;&nbsp;用户邮箱: {{ bemail }}</h2>
            <h2 style="text-align:center;">订单状态: {{ status=="1"?"已完成":"未完成" }}</h2>
            <el-table 
            ref="multipleTable" 
            :data="orderList" 
            tooltip-effect="dark" 
            style="width:100%" 
            @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                label="商品图片"
                width="200">
                    <template #default="scope">
                        <div style="text-align:center">
                            <el-image :src="scope.row.gpicture" style="width: 120px; height: 120px"/></div>
                        <div style="text-align:center">{{scope.row.gname}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                label="商品ID"
                width="100"
                prop="goodstable_id">
                </el-table-column>
               
                <el-table-column
                label="商品单价/元"
                width="150"
                prop="grprice">
                </el-table-column>
                <el-table-column
                label="购买数量"
                width="100"
                prop="shoppingnum">
                </el-table-column>
                
                <el-table-column
                label="下单时间"
                width="300"
                prop="orderdate">
                </el-table-column>
                <el-table-column
                label="小计/元"
                width="100"
                prop="curSum">
                </el-table-column>
            </el-table>
            <el-tag style="float:right;display:block;font-size:30px;" type="success" size="large">总计: {{ amount }} 元</el-tag>
        </div>
    </el-container>
</div>
</template>

<script>
import axios from 'axios'

export default{
    data(){
        return {
              //订单列表数据
              orderList:[],
              oid:"",
              bemail:"",
              status:"",
              amount:0,
              orderdate:""
        }
    },
    mounted(){
        let oid=this.$route.params.oid;
        let bemail=this.$route.params.bemail;
        let status=this.$route.params.status;
        
        this.$message({
            type:'success',
            message:'order Detail-订单ID: '+oid+", bemail:"+bemail+", status:"+status
        })
        this.oid=oid;
        this.bemail=bemail;
        this.status=status;

        this.askOrderDetail(parseInt(this.oid));
    },  
    methods:{
        contentChange(content){
            this.content=content;
        },
        cancel(){
            this.$router.go(-1)
        },
        submit(){
            this.$message({
                type:'success',
                message:'设置详情HTML: '+this.content
            })
        },
        askOrderDetail(oid){
            
            let targetURL='http://localhost:8888/selectOrderDetail?oid='+oid;
            axios.get(targetURL)
            .then(successResponse=>{
                this.orderList=successResponse.data;
                this.amount=this.orderList[0].amount;
                let baseURL='http://localhost:8888';
                for(let i=0;i<this.orderList.length;i++){
                    let goodsImg=this.orderList[i].gpicture;
                    goodsImg=baseURL+"/images/"+goodsImg;
                    this.orderList[i].gpicture=goodsImg;
                    this.orderList[i].curSum=this.orderList[i].grprice * this.orderList[i].shoppingnum;
                }

            }).catch(failResponse=>{
                alert("askOrderDetail响应异常");
            })


        },
    }
}
</script>